<!--
 * @Description: 
 * @Version: 1.0.1
 * @Autor: hrlu.cn
 * @Date: 2022-02-27 21:44:06
 * @LastEditors: hrlu.cn
 * @LastEditTime: 2022-02-27 21:55:22
-->
{% extends "base.html" %}

{% block cssextend %}
    <link href="/assets/vendor/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/assets/css/bootstrap-table-custom.css" rel="stylesheet">
{% endblock %}

{% block cssstyle %}
    .bordered-header th {
        border-left: 1px solid #dee2e6;
        border-right: 1px solid #dee2e6;
    }
{% endblock %}

{% block content %}
     <!-- DATA TABLE-->
     <section class="p-t-20">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="statistic-chart-1">
                        <!--h3 class="title-3 m-b-30">Holder Number</h3-->
                        
                        <table id="holder-number-table" class="table table-hover table-bordered">
                            <thead>
                                <tr class="bordered-header">
                                    <th colspan="3" data-align="center" >基本信息</th>

                                    <th colspan="5" data-align="center" >近期变化</th>
                                    <th colspan="3" data-align="center" >30日变化</th>
                                    <th colspan="3" data-align="center" >60日变化</th>
                                    <th colspan="3" data-align="center" >90日变化</th>
                                    <th colspan="3" data-align="center" >180日变化</th>
                                    <th colspan="3" data-align="center" >360日变化</th>
                                </tr>

                                <tr>
                                    <th data-field="scode" data-sortable="true">股票代码</th>
                                    <th data-align="center" data-field="sname" data-sortable="true">股票名称</th>
                                    <th data-align="center" data-field="industry" data-sortable="true">所属行业</th>


                                    <th data-align="center" data-field="t_0_c" data-sortable="true">当前股东户数</th>
                                    <th data-align="center" data-field="t_0_d" data-sortable="true">当前日期</th>
                                    <th data-align="center" data-field="t_q_c" data-sortable="true">上一期股东户数</th>
                                    <th data-align="center" data-field="t_q_d" data-sortable="true">上一期日期</th>
                                    <th data-align="center" data-field="t_q_r" data-sortable="true">变化比例</th>

                                    <th data-align="center" data-field="t_30_c" data-sortable="true">股东户数</th>
                                    <th data-align="center" data-field="t_30_d" data-sortable="true">日期</th>
                                    <th data-align="center" data-field="t_30_r" data-sortable="true">变化比例</th>

                                    <th data-align="center" data-field="t_60_c" data-sortable="true">股东户数</th>
                                    <th data-align="center" data-field="t_60_d" data-sortable="true">日期</th>
                                    <th data-align="center" data-field="t_60_r" data-sortable="true">变化比例</th>

                                    <th data-align="center" data-field="t_90_c" data-sortable="true">股东户数</th>
                                    <th data-align="center" data-field="t_90_d" data-sortable="true">日期</th>
                                    <th data-align="center" data-field="t_90_r" data-sortable="true">变化比例</th>

                                    <th data-align="center" data-field="t_180_c" data-sortable="true">股东户数</th>
                                    <th data-align="center" data-field="t_180_d" data-sortable="true">日期</th>
                                    <th data-align="center" data-field="t_180_r" data-sortable="true">变化比例</th>

                                    <th data-align="center" data-field="t_360_c" data-sortable="true">股东户数</th>
                                    <th data-align="center" data-field="t_360_d" data-sortable="true">日期</th>
                                    <th data-align="center" data-field="t_360_r" data-sortable="true">变化比例</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--div class="modal fade" id="holders" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="modalLabel">十大流通股东</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <div id="echarts" style="width:100%;height:600px;"></div>
                </div>
            </div>
        </div>
    </div-->`
{% endblock %}

{% block jsextend %}
    <script src="/assets/vendor/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="/assets/vendor/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <!--script src="/assets/js/echarts.min.js"></script-->
{% endblock %}

{% block jsscript %}
<script>
    var tableOption = {
        url: '/api/holder_number_data?sort=scode&order=asc',
        responseHandler: function (res, jqXHR) {
            for (var idx in res.rows) {
                var row = res.rows[idx]
                var propKeys = ['t_q_r', 't_30_r', 't_60_r', 't_90_r', 't_180_r', 't_360_r'];

                for (var i in propKeys) {
                    var key = propKeys[i];
                    if (row[key] == null) {
                        row[key] = '';
                    } else {
                        row[key] = digitFormatter(row[key] / 100, 'percentage');
                        row[key] = dyeingFormatter(row[key]);
                    }
                    
                }

                var dateKeys = ['t_0_d', 't_q_d', 't_30_d', 't_60_d', 't_90_d', 't_180_d', 't_360_d'];
                for (var i in dateKeys) {
                    var key = dateKeys[i];
                    // row[key] = row[key].replaceAll('-', '');
                    if (row[key] == null) {
                        row[key] = ''
                    }

                    row[key] = `
                        <span class="badge badge-info" style="font-size: 85%;">` + row[key] + `</span>
                    `;
                }

                var numKeys = ['t_0_c', 't_q_c', 't_30_c', 't_60_c', 't_90_c', 't_180_c', 't_360_c'];

                for (var i in numKeys) {
                    var key = numKeys[i];

                    if (row[key] == null) {
                        row[key] = '';
                    }
                    /* else if (key == 't_30_c' || key == 't_60_c') {
                        row[key] = `
                        <span style="font-style: italic; color: #08f;">` + row[key] + `</span>
                    `;
                    } */
                    else {
                        row[key] = `
                            <span style="font-weight: bold;">` + row[key] + `</span>
                        `;
                    }
                    
                }
                
                /*
                var periods = Object.keys(row.aperiodic_change).sort();
                var latest_aperiod = row.aperiodic_change[periods[periods.length - 1]];
                
                if (latest_aperiod != undefined) {
                    var aperiodKeys = ['c1l1', 'c1p1', 'c1p2', 'c1p3', 'p1p2', 'p2p3'];

                    for (var i in aperiodKeys) {
                        var key = aperiodKeys[i];

                        row[key] = dyeingFormatter(latest_aperiod[key + '_diff'] + '(' + digitFormatter(latest_aperiod[key + '_prop'], 'percentage') + ')');
                    }
                }*/
            }
            return res;
        },
        /* onClickRow: function (row, elem, field) {
            $('#holders').modal('toggle');
            refresh_table(row);
        }, */
        align: 'center',
        search: true,
        showRefresh: true,
        showColumns: true,
        iconSize: 'sm',

        classes: 'table',
        toolbar: '#filter-toolbar',

        sortable: true,
        serverSort: true,

        pagination: true,
        sidePagination: 'server',
        pageSize: 10,
        pageList: [10, 20, 50, 100, 1000],
    }

    $('#holder-number-table').bootstrapTable(tableOption);
    searchInputPopover();

    /* function refresh_table(row) {
        $.ajax({
            url: '/api/source?scode=' + row.scode,
            success: function (res) {
                var rawData = res.rows;
                var length = rawData.trade_date.length;
                var kData = [];
                
                for (var i = 0; i < length; i++) {
                    kData.push([
                        rawData.open[i],
                        rawData.close[i],
                        rawData.low[i],
                        rawData.high[i],
                        rawData.vol[i],
                    ]);
                }

                var options = {};
                $.extend(true, options, KLineOption);

                options.dataZoom[0].start = length < 60 ? 0:100-parseInt(6000/length);
                
                options.xAxis[0].data = rawData.trade_date;
                options.xAxis[1].data = rawData.trade_date;
                options.series[0].data = rawData.vol;
                options.series[1].data = kData;
                options.series[2].data = rawData.ma5;
                options.series[3].data = rawData.ma10;
                options.series[4].data = rawData.ma20;

                // var maxClose = Math.max(...rawData.close);
                // var minClose = Math.min(...rawData.close);
                // console.log(JSON.stringify(row));
                // var maxHold = Math.max(...Object.keys(row.periodic_change).map(function (x) {return row.periodic_change[x].holder_num}));
                // var minHold = Math.min(...Object.keys(row.periodic_change).map(function (x) {return row.periodic_change[x].holder_num}));
                
                // console.log(maxClose, minClose, maxHold);

                options.yAxis.push({
                    scale: true,
                    splitNumber: 2,
                    offset: -15,
                    axisLabel: {
                        formatter: function (value, index) {
                            return digitFormatter(value, 'CNS', 0);
                        }
                    }
                });

                // options.grid[0].right = 50;
                // options.grid[1].right = 50;

                var holdNumber = [];
                for (var date in row.periodic_change) {
                    // var displayValue = (row.periodic_change[date].holder_num / (maxHold - minHold)) * (maxClose - minClose) + minClose;

                    holdNumber.push([
                        date, row.periodic_change[date].holder_num, row.periodic_change[date].holder_num
                    ]);
                }
                
                options.legend.data.push('股东户数');
                options.series.push({
                    name: '股东户数',
                    type: 'line',
                    yAxisIndex: 2,
                    data: holdNumber,
                    smooth: true,
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            width: 1
                        }
                    }
                });

                var myChart = echarts.init(document.getElementById('echarts'));
                myChart.setOption(options);
                window.onresize = function () {
                    myChart.resize();
                }
            }
        })
    }*/
</script>
{% endblock %}